<%--
  Created by IntelliJ IDEA.
  User: Cc
  Date: 2020/12/30
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/jqPaginator.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">用户列表</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            用户名称：
            <input type="text" placeholder="用户名称" id="queryUser" autocomplete="off" class="layui-input">
            用户部门：
            <input type="text" placeholder="用户部门" id="queryDepartment" autocomplete="off" class="layui-input">
            <button class="layui-btn" type="button" onclick="selectUser()"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>

    <xblock>
        <span class="x-right" style="line-height:40px" id="showTotal">共有数据：1 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <%--<th>ID</th>--%>
            <th>用户名称</th>
            <th>账号</th>
            <th>手机号</th>
            <th>部门</th>
            <th>权限</th>
            <th>最后登陆时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tab"></tbody>
        <tr>
            <td colspan="8" align="center">
                <ul class="pagination" id="pagination1"></ul>
            </td>
        </tr>
    </table>
</div>

<%--用户修改(modal)--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">用户修改</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <input type="hidden" id="inputId">
                        <label for="inputUserName" class="col-sm-2 control-label">用户名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputUserName" placeholder="用户名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputUserPho" class="col-sm-2 control-label">手机号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputUserPho" placeholder="手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-10">
                            <select id="inputDepartment" name="inputDepartment">

                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">权限</label>
                        <div class="col-sm-10">
                            <select id="inputPower" name="inputPower">

                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="updateUser()" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //定义一个数组接收所有权限
    let userPowerList = [];
    //定义一个数组接收所有部门
    let departmentList = [];

    //解决enter问题
    $(document).ready(function enterJudage(e) {
        $(this).keydown(function (e) {
            if (e.which=="13" && ($("#queryDepartment").val()!='' || $("#queryUser").val()!='')){
                selectUser(1);
                return false;
            }
        })
    })
    //总页数
    let totalPages=0;
    //总条数
    let totalCounts=0;
    //当前页
    let currentPage=0;
    //页面加载就执行
    $(document).ready(function () {
        selectAll(1);
        //全查
        $("#pagination1").jqPaginator({
            totalPages:totalPages,
            totalCounts:totalCounts,
            currentPage:currentPage,
            //加载按钮
            first:'<li class="first"><a href="javascript:void(0);">首页</a></li>',
            prev:'<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
            next:'<li class="next"><a href="javascript:void(0);">下一页</a></li>',
            last:'<li class="last"><a href="javascript:void(0);">末页</a></li>',
            page:'<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            //页面改变就执行
            onPageChange:function (number) {
                //当页面一改变就执行的函数
                selectAll(number);
            }
        })

        //获取数据库所有权限
        $.ajax({
            url : "/power/getAll",
            type : "get",
            dataType : "json",
            success:function (data) {
                userPowerList = data.data;
                console.log(userPowerList);
            }
        })

        //获取所有部门
        $.ajax({
            url:"/department/getAll",
            type:"GET",
            dataType:"JSON",
            success:function (data) {
                departmentList = data.departmentList;
                console.log(departmentList);
            }
        })


    })
    //全查函数
    function selectAll(number) {
        $.ajax({
            url:"../user/selectAll",
            type:"post",
            async:false,
            dataType:"json",
            data:{
                pageNum:number,//当前页
                pageSize:4,//每页条数
                uName:$("#queryUser").val(),
                departmentName:$("#queryDepartment").val(),
            },
            success:function (data) {
                console.log(data)
                //显示条数
                $("#showTotal").text('共有数据'+data.paging.total);
                //取出返回数据
                let userlist=data.paging.list;
                if (userlist.length>0){
                    totalPages=data.paging.pages;
                    totalCounts=data.paging.total;
                    currentPage=data.paging.pageNum;
                    //数据写在当前面页
                    let str='';
                    /*for (let i=0;i<userlist[i].length;i++){
                        let dname=userlist[i].departmentName
                        if (data.paging.list[i].departmentName==null){
                            dname="";
                        }
                    }*/
                    for (let i=0;i<userlist.length;i++){
                        let departmentName=userlist[i].departmentName;
                        if (departmentName==null){
                            departmentName="";
                        }
                        let power=userlist[i].power;
                        if (power==null){
                            power="";
                        }
                        let uname=userlist[i].uname;
                        if (uname==null){
                            uname="";
                        }
                        str+='<tr>'+
                            '<td>'+uname+'</td>'+
                            '<td>'+userlist[i].uaccount+'</td>'+
                            '<td>'+userlist[i].uphone+'</td>'+
                            '<td>'+departmentName+'</td>'+
                            '<td>'+power+'</td>'+
                            '<td>'+userlist[i].lastLoginTime+'</td>'+
                            '<td class="td-manage"><button type="button" data-toggle="modal" data-target="#myModal" onclick="update('+userlist[i].uid+')"><i class="layui-icon">&#xe642;</button>'+
                            '<button type="button" onclick="deleteUser('+userlist[i].uid+')" <i class="layui-icon">&#xe640;</i></button></td>'+
                            '</tr>'
                    }
                    $("#tab").html(str);//用这个方法往里面添加数据，往select下拉列表
                }else {
                    //没有数据
                    //没有数据
                    totalPages=1;
                    totalCounts=1;
                    currentPage=1;
                    $("#tab").html('<tr><td colspan="8" align="center">没有用户数据请添加数据</td></tr>');
                }
            },error:function () {
                alert("查询用户失败")
            }
        })
    }
    //模糊查询
    function selectUser() {
        selectAll(1);
        //加载按钮
        //给三个 变量赋值
        $("#pagination1").jqPaginator({
            //总页数
            totalPages:totalPages,
            //总条数
            totalCounts:totalCounts,
            //当前页
            currentPage:currentPage,
            //加载按钮
            first:'<li class="first"><a href="javascript:void(0);">首页</a></li>',
            prev:'<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
            next:'<li class="next"><a href="javascript:void(0);">下一页</a></li>',
            last:'<li class="last"><a href="javascript:void(0);">末页</a></li>',
            page:'<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            //
            onPageChange:function (number) {
                //当页面一改变就执行的函数
                selectAll(number);
            }
        })
    }

    //信息回显
    function update(id) {
        $.ajax({
            url: "../user/update",
            type: "POST",
            dataType: "JSON",
            data: {
                "id":id
            },
            success:function (data) {
                console.log(data)
                if (data.code=="200"){
                    $("#inputId").val(data.updateInfo.uid);
                    $("#inputUserName").val(data.updateInfo.uname);
                    $("#inputUserPho").val(data.updateInfo.uphone);
                    let strDeparment = '';
                    for (let i = 0; i < departmentList.length; i++){
                        if (data.updateInfo.department.departmentName==departmentList[i].departmentName){
                            strDeparment +="<option value='"+departmentList[i].id+"' class='Department' selected>"+departmentList[i].departmentName + "</option>";
                        }else {
                            strDeparment +="<option value='"+departmentList[i].id+"' class='Department'>"+departmentList[i].departmentName + "</option>";
                        }
                    }
                    $("#inputDepartment").html(strDeparment);


                    let strUserPower ='';
                    for (let i = 0 ; i < userPowerList.length ; i++){
                        let power = userPowerList[i];
                        if (data.updateInfo.userPower.power==power.power){
                            strUserPower += "<option value='"+ power.id +"' class='userPower' selected>" + power.power + "</option>";
                        }else {
                            strUserPower += "<option value='"+ power.id +"' class='userPower'>" + power.power + "</option>";
                        }
                    }
                    $("#inputPower").html(strUserPower);
                }
            }
        });

    }

    // 修改信息
    function updateUser() {
        var id = $("#inputId").val();
        var username = $("#inputUserName").val();
        var pho = $("#inputUserPho").val();
        var dId = $("option[class='Department']:selected").val()
        var rId = $("option[class='userPower']:selected").val();

        $.ajax({
            url:"../user/updateUser",
            type:"POST",
            dataType:"JSON",
            data:{
                "uId":id,
                "uName":username,
                "uPhone":pho,
                "dId":dId,
                "rId":rId
            },
            success:function (data) {
                if (data.code=="200"){
                    $("#myModal").modal("hide");
                    alert("修改成功")
                    location.reload();
                }else {
                    alert("修改失败")
                }
            }

        })
    }
    
    //删除用户
    function deleteUser(id) {
        if (confirm("确认删除嘛？")){
            $.ajax({
                url:"../user/deleteUser",
                type:"POST",
                dataType:"JSON",
                data:{
                    "id":id
                },
                success:function (data) {
                    if (data.code=="200"){
                        alert("删除成功")
                        location.reload();
                    }else {
                        alert("删除失败")
                    }
                }
            })
        }

    }
</script>
</body>

</html>
